<template>
  <div class="box">
    <div class="body">
            <el-row>
        <el-col :span="8" class="el_col">
          <div class="grid-content bg-purple">
            <el-input
              v-model="input"
              placeholder="请输入内容"
              class="input"
            ></el-input>
          </div>
          <el-button @click="delInput" >清空</el-button>
          <el-button class="btn2" @click="searchKeyWords" >搜索</el-button>
        </el-col>
        <el-col :span="8"
          ><div class="grid-content bg-purple-light"></div
        ></el-col>
        <el-col :span="8" class="el_colright">
          <div class="grid-content bg-purple">
            <el-button type="primary" icon="el-icon-edit" @click="addPermissions"
              >新增权限组</el-button
            >
          </div></el-col
        >
      </el-row>

<headerVue :title="total" />
    </div>

  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}"
    class="table"
    >
        <el-table-column
      type="selection"
      width="55">
    </el-table-column>
        <el-table-column
      prop="title"
      label="用户名"
      width="650">
    </el-table-column>
    <el-table-column
      prop="update_date"
      label="日期"
      sortable
      width="650">
    </el-table-column>
          <el-table-column label="操作" width="140">
            <template #default="{ row }">
              <div>
                <i class="el-icon-edit" @click="changeList(row.id)"></i>
                <i class="el-icon-delete" @click="delList(row.id)"></i>
              </div>
            </template>
          </el-table-column>

  </el-table>
<PageTool :total="total" :paginationPage="renderObj.page" :paginationPagesize="renderObj.pagesize" @pageChange="pageChange" @changSize="pageSizeChange" />

<permissionsAddVue ref="permissionsAdd" :text="text" :pageTitle="pageTitle" :ruleInline="ruleInline" @newDataes="newDataes" />
  </div>
</template>

<script>
import headerVue from '../components/header.vue'
import PageTool from '@/module-manage/components/page-tool'
import { list, remove } from '@/api/base/permissions.js'
import permissionsAddVue from '../components/permissions-add.vue'
export default {
  components: {
    headerVue, PageTool, permissionsAddVue
  },
  data () {
    return {
      input: '',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: [],
      renderObj: {
        page: 1,
        pagesize: 10
      },
      text: '',
      pageTitle: '',
      ruleInline: {
        title: [{ required: true, message: '请填写', trigger: 'blur' }]
      },
      total: ''
    }
  },

  created () {
    this.getPremissList()
  },

  methods: {
    async getPremissList () {
      const { data } = await list({ title: this.input, ...this.renderObj })
      // console.log(data)
      this.tableData = data.list
      this.total = data.counts
      this.tableData.forEach(item => { item.update_date = item.update_date.substring(0, 10) })
    },
    addPermissions () {
      this.text = '创建'
      this.pageTitle = '权限组'
      this.$refs.permissionsAdd.dialogFormV()
    },
    newDataes () {
      this.getPremissList()
      this.$refs.permissionsAdd.dialogFormH()
    },
    pageChange (pageNum) {
      this.renderObj.page = pageNum
      this.getPremissList()
    },
    pageSizeChange (pageSize) {
      this.renderObj.pagesize = pageSize
      this.getPremissList()
    },
    changeList (id) {
      this.$refs.permissionsAdd.hanldeEditForm(id)
      this.$refs.permissionsAdd.dialogFormV()
    },
    async delList (id) {
      await remove({ id })
      this.getPremissList()
    },
    async searchKeyWords () {
      // const { data } = await list({ title: this.input, ...this.renderObj })
      // this.tableData = data.list
      // this.total = data.counts
      // this.tableData.forEach(item => { item.update_date = item.update_date.substring(0, 10) })
      this.getPremissList()
    },
    delInput () {
      this.input = ''
      this.getPremissList()
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  padding: 20px;
}
.body {
  padding: 20px;
  background-color: #fff;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #fff;
}
.input {
  width: 200px;
}
.el_col {
  display: flex;
  button {
    width: 56px;
    font-size: 12px;
    margin-left: 15px;
    text-align: center;
    padding: 0;
  }
  .btn2 {
    background-color: #409eff;
    color: #fff;
  }
}
.el_colright {
  display: flex;
  justify-content: flex-end;
  button {
    font-size: 12px;
    width: 97px;
    background-color: #67c23a;
    padding: 9px 15px 9px 15px;
  }
}
.el-icon-edit {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background-color: #ecf5ff;
  color: #409eff;
  line-height: 37px;
  text-align: center;
}
.el-icon-delete {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background-color: #fef0f0;
  color: #f56c6c;
  line-height: 37px;
  text-align: center;
}

 /deep/ .el-table_1_column_4{
  text-align: center;
  }

 /deep/ .el-table_1_column_2{
  text-align: center;
  }
</style>
